<template>
    <div id="AdminArticleManger" :key="reloadKey">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="头像" width="180">
                <template #default="scope">
                    <img
                        :src="
                            scope.row.headsculptureUrl
                                ? scope.row.headsculptureUrl
                                : defaultImage
                        "
                        width="40"
                        height="40"
                        style="border-radius: 50%; cursor: pointer"
                        @click="toPersonal(scope.row)"
                    />
                </template>
            </el-table-column>
            <el-table-column label="昵称" prop="nickname"> </el-table-column>
            <el-table-column label="用户名" prop="username"> </el-table-column>
            <el-table-column label="操作" width="300">
                <template #default="scope">
                    <el-button
                        size="mini"
                        type="warning"
                        @click="handlefeng(scope.$index, scope.row)"
                        >封禁</el-button
                    >
                    <el-button
                        size="mini"
                        type="success"
                        @click="handlejie(scope.$index, scope.row)"
                        >解禁</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  <script>
import { ElMessageBox } from "element-plus";
export default {
    name: "AdminArticleManger",
    data() {
        return {
            reloadKey: 0,
            tableData: [],
            defaultImage: require("../../assets/img/personal/ttxbb.jpg"),
        };
    },
    methods: {
        handlefeng(index, row) {
            this.$axios({
                method: "get",
                headers: { token: localStorage.getItem("token") || "" },
                url: `http://localhost:8081/ts/admin/forbidden?userId=${row.serial}`,
            }).then((res) => {
                this.$message.success("操作成功");
            });
            this.$axios({
                method: "get",
                headers: { token: localStorage.getItem("token") || "" },
                url: `http://localhost:8081/ts/admin/allUserInfo`,
            }).then((res) => {
                this.tableData = res.data.respData;
            });
        },
        handlejie(index, row) {
            this.$axios({
                method: "get",
                headers: { token: localStorage.getItem("token") || "" },
                url: `http://localhost:8081/ts/admin/unforbidden?userId=${row.serial}`,
            }).then((res) => {
                this.$message.success("操作成功");
            });
            this.$axios({
                method: "get",
                headers: { token: localStorage.getItem("token") || "" },
                url: `http://localhost:8081/ts/admin/allUserInfo`,
            }).then((res) => {
                this.tableData = res.data.respData;
            });
        },
        handleDelete(index, row) {
            // 显示确认弹框
            ElMessageBox.confirm("确定要删除吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    // 用户点击了确定按钮
                    // console.log("用户点击了确定按钮");
                    // 执行删除操作
                    this.$axios({
                        method: "get",
                        headers: { token: localStorage.getItem("token") || "" },
                        url: `http://localhost:8081/ts/admin/deleteUser?userId=${row.serial}`,
                    }).then((res) => {
                        this.$message.success("操作成功");
                        this.$axios({
                            method: "get",
                            headers: {
                                token: localStorage.getItem("token") || "",
                            },
                            url: `http://localhost:8081/ts/admin/allUserInfo`,
                        }).then((res) => {
                            this.tableData = res.data.respData;
                            this.reloadKey++;
                        });
                    });
                })
                .catch(() => {
                    this.$message.success("用户取消操作");
                });
            this.reloadKey++;
        },
    },
    created() {
        this.$axios({
            method: "get",
            headers: { token: localStorage.getItem("token") || "" },
            url: `http://localhost:8081/ts/admin/allUserInfo`,
        }).then((res) => {
            this.tableData = res.data.respData;
        });
    },
};
</script>
  
  <style lang="less" scoped>
</style>
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  